<template>
    <section style="padding: 24px; background:#fff;">
        <div class="table-operator">
            <a-button type="primary" icon="plus" @click="handleAdd">新增</a-button>
        </div>
        <a-table ref="table" bordered :loading='loading' :columns="columns" rowKey="id" :data-source="tbList" @change="handleTableChange">
            <span slot="state" slot-scope="state">
                <a-tag :color="state === '1' ? ' #87d068' : '#f50'">
                    {{stateFilter(state)}}
                </a-tag>
            </span>
            <span slot="image" slot-scope="text">
                <img :src="text" width="150" height="80">
            </span>
            <span slot="action" slot-scope="text, record">
                <a @click="handleEdit(record)">编辑</a>
                <a-divider type="vertical" />
                <a-popconfirm cancelText='取消' okText='确定' title="确定删除吗?" @confirm="() => handleDelete(record.id)" placement="topLeft">
                    <a style="color:red">删除</a>
                </a-popconfirm>
            </span>
        </a-table>
        <add-looper ref="addlooper" @ok="modalFormOk"></add-looper>
    </section>
</template>
<script>
import { listLoop,deleteLoop } from '@/api/api'
import AddLooper from './modules/AddLooper.vue';
const columns = [
    {
        title: '序号',
        dataIndex: '',
        key: 'rowIndex',
        align: 'center',
        customRender: function (t, r, index) {
            return parseInt(index) + 1
        },
    },
    {
        title: '标题',
        dataIndex: 'title',
        align: 'center',
    },
    {
        title: '跳转地址',
        dataIndex: 'targetUrl',
        align: 'center',
    },
    {
        title: '轮播图',
        dataIndex: 'imageUrl',
        align: 'center',
        scopedSlots: { customRender: 'image' },
    },
    {
        title: '状态',
        dataIndex: 'state',
        align: 'center',
        scopedSlots: { customRender: 'state' },
    },
    {
        title: '创建时间',
        dataIndex: 'createTime',
        align: 'center'
    },
    {
        title: '更新时间',
        dataIndex: 'updateTime',
        align: 'center'
    },
    {
        title: '操作',
        dataIndex: 'edit',
        scopedSlots: { customRender: 'action' },
        align: 'center',
        width: 140
    }
];
export default {
    components: { AddLooper },
    data() {
        return {
            loading: false,
            columns,
            tbList: [],
        }
    },
    methods: {
        getData() {
            this.loading = true;
            listLoop().then(res => {
                if (res.code === 200) {
                    this.loading = false;
                    this.tbList = res.data;
                } else {
                    this.loading = false;
                }
            })
        },
        stateFilter(text) {
            if (text == '0') {
                return '删除';
            } else if (text == '1') {
                return '正常';
            }
        },
        handleAdd() {
            this.$refs.addlooper.title = "新增";
            this.$refs.addlooper.add();
        },
        handleEdit(record) {
            this.$refs.addlooper.title = "编辑";
             this.$refs.addlooper.edit(record);
        },
        handleDelete(record) {
            deleteLoop(record).then(res =>{
                if(res.code){
                    this.$message.success("删除成功!");
                    this.getData();
                }else{
                    this.$message.error(res.message);
                }
            })
        },
        handleTableChange() {
            this.getData();
        },
        modalFormOk(){
            this.getData();
        }
    },
    mounted() {
        this.getData();
    },
}
</script>